<template>
    <div style="padding:0px 20px">
        <el-form ref="form" :model="form" label-width="100px">
            <el-row>
                <el-row>
                    <el-col :span="15">
                        <el-form-item label="应用类型">
                            <div style="margin-left: 60px;">
                                <el-radio-group v-model="radio" @keyup.enter.native="toQuery" size="small">
                                    <el-radio label="1">当前应用</el-radio>
                                    <el-radio label="2">其他应用</el-radio>
                                </el-radio-group>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search"
                                   style="margin-left: 30px;"
                                   @click="toQueryJob()">搜索
                        </el-button>
                    </el-col>
                </el-row>
                <el-row style="margin-left: 0px;margin-top: 10px;">
                    <el-col :span="15">
                        <el-form-item style="margin-left: 30px;" label-width="110px" label="作业名称或编码">
                            <el-input v-model="jobNameAndJobCode" clearable size="small" placeholder="请输入关键字"
                                      style="width: 193px;margin-left: 20px;"
                                      class="filter-item" @keyup.enter.native="toQuery"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-button :disabled="delJobDisable" class="filter-item" size="mini" type="primary" style="margin-left: 29px;"
                                   v-on:click="addDependOver()">确认选择
                        </el-button>
                    </el-col>
                </el-row>
            </el-row>
        </el-form>
        <el-divider></el-divider>
        <el-col :span="10" style="margin-bottom: 20px;">
            作业列表
            <!--表格渲染-->
            <el-table border height="370" ref="multipleTable" :data="data" highlight-current-row style="width: 100%;"
                      @selection-change="selectionLineChangeHandle" @select-all="jobListSelect" @select="jobListSelect">
                <el-table-column type="selection"/>
                <el-table-column :show-overflow-tooltip="true" prop="jobCode" label="作业编码"/>
                <el-table-column :show-overflow-tooltip="true" prop="jobName" label="作业名称"/>
            </el-table>
            <!--分页组件-->
            <el-pagination :total="total" :current-page="page + 1" style="margin-top: 8px;"
                           layout="prev, pager, next, sizes" small
                           :pager-count="5" prev-text=" " next-text=" " @size-change="sizeChange"
                           @current-change="pageChange"/>
        </el-col>
        <el-col :span="4" style="margin-top: 150px;">
            <el-row>
                <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" style="margin-left: 27px;"
                           :disabled="addJobDisable" @click="addDependJob()">添加
                </el-button>
            </el-row>
            <el-row>
                <el-button class="filter-item" size="mini" type="danger" icon="el-icon-delete"
                           style="margin-left: 27px;margin-top: 20px;" :disabled="delJobDisable"
                           @click="delDependJob()">删除
                </el-button>
            </el-row>

        </el-col>
        <el-col :span="10">
            依赖列表
            <el-table border height="370" :data="jobDependData" highlight-current-row
                      style="margin-left: 0px;width: 100%;"
                      @selection-change="selectionDependentChangeHandle" @select-all="dependentListSelect" @select="dependentListSelect">
                <el-table-column type="selection"/>
                <el-table-column :show-overflow-tooltip="true" prop="jobCode" label="作业编码"/>
                <el-table-column :show-overflow-tooltip="true" prop="jobName" label="作业名称"/>
            </el-table>
        </el-col>
    </div>
</template>

<script>
import crud from '@/mixins/crud'
import appApi from '@/api/app/app'

export default {
  name: 'jobDependDetail',
  props: ['jobDependData', 'data', 'total', 'page', 'radio', 'jobNameAndJobCode', 'query'],
  mixins: [crud],
  data() {
    return {
      appointAppName: [],
      //dependData: [],
      title: '依赖作业列表',
      sort: ['sort,asc', 'id,desc'],
      dictName: '',
      form: {
        id: null,
        label: null,
        value: null,
        defaultParam: null,
        dict: {
          id: null
        },
        sort: 999
      },
      rules: {},
      totalElements: 0,
      dataonLineListSelections: [],
      dataDependentListSelections: [],
      addJobDisable: true,
      delJobDisable: true
    }
  },
  methods: {
    toQueryJob() {
      this.query = []
      var data = this.jobDependData
      this.query.appName = this.radio
      if ('' != this.jobNameAndJobCode) {
        this.query.jobNameAndJobCode = this.jobNameAndJobCode
      }
      this.toQuery()
      this.jobDependData = data
    },
    addDependOver() {
      this.$emit('message', this.jobDependData)
    },
    // 获取数据前设置好接口地址
    beforeInit() {
      //this.jobDependData = [];
      this.url = 'api/jobDef/getJobList'
      return true
    },
    //作业列表选择
    selectionLineChangeHandle(val) {
      this.dataonLineListSelections = val
    },
    //依赖列表选择
    selectionDependentChangeHandle(val) {
      this.dataDependentListSelections = val
    },
    addDependJob() {
      if (this.dataonLineListSelections.length > 0) {
        let bool = this.isArrayEqual(this.dataonLineListSelections,this.jobDependData)
        if (!bool){
          for (var i = 0; i < this.dataonLineListSelections.length; i++) {
            this.jobDependData.push({
              'jobName': this.dataonLineListSelections[i].jobName,
              'jobCode': this.dataonLineListSelections[i].jobCode
            })
          }
        }
        this.$refs.multipleTable.clearSelection()
        this.addJobDisable = true;
      } else {
        this.$notify({
          title: '警告',
          message: '请选择至少一条作业',
          type: 'warning'
        })
      }
    },

    isInArray(arr, value) {

      for (var i = 0; i < arr.length; i++) {
        if (value === arr[i]) {
          return true
        }
      }
      return false
    },
    delDependJob() {
      if (this.dataDependentListSelections.length > 0) {
        let jobNameList = []
        for (var i = 0; i < this.dataDependentListSelections.length; i++) {
          jobNameList.push(this.dataDependentListSelections[i].jobCode)
        }
        for (var k = 0; k < this.jobDependData.length; k++) {
          if (this.isInArray(jobNameList, this.jobDependData[k].jobCode)) {
            this.jobDependData.splice(k, 1)
            k--
          }
        }
        this.delJobDisable = true;
      } else {
        this.$notify({
          title: '警告',
          message: '请选择至少一条任务',
          type: 'warning'
        })
      }
    },
    //作业列表选择事件
    jobListSelect(selection){
      if (selection.length>0){
        this.addJobDisable = false;
      }else{
        this.addJobDisable = true;
      }
    },
    dependentListSelect(selection){
      if (selection.length>0){
        this.delJobDisable = false;
      }else{
        this.delJobDisable = true;
      }
    },
    isArrayEqual(arr1,arr2){
      const a1 = arr1.map((i) => i.jobCode)
      let a2 = arr2.map((i) => i.jobCode)
      let tempArr = []
      if (a1.length>0 && a2.length>0){
        for (let i = 0; i < a1.length; i++) {
          if (a2.indexOf(a1[i]) !== -1) {

            tempArr.push(a1[i])
          } else {

          }
        }
        if (tempArr.length>0){
          let str = tempArr.join(',')
          this.$notify({
            title: '警告',
            message: '选择的作业编码:['+str+']已存在，请重新选择',
            type: 'warning',
            dangerouslyUseHTMLString:true,
            customClass:'notify-success'
          })
        }
        return tempArr.length >0
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    ::v-deep .el-input-number .el-input__inner {
        text-align: left;
    }
</style>
<style>
.notify-success p{
  word-wrap:break-word;
  word-break:break-all;
}
</style>
